import "./stytle/infoCard.scss";
import { Input, message } from "antd";
import { useCallback, useState, useEffect } from "react";

import { requestTipsApi } from "@/api/booking";

interface Props {
  value: DataType;
  title: string;
}

interface Columns {
  title: string;
  key: keyof DataType;
}

// 患者信息
const patient: Columns[] = [
  {
    title: "患者姓名",
    key: "name",
  },
  {
    title: "就诊卡号",
    key: "bookingID",
  },
  {
    title: "证件类型",
    key: "cardType",
  },
  {
    title: "证件号码",
    key: "IDcard",
  },
  {
    title: "手机号码",
    key: "tel",
  },
];

// 预约信息
const bookingInfo: Columns[] = [
  {
    title: "就诊医院",
    key: "hospital",
  },
  {
    title: "医院地址",
    key: "address",
  },
  {
    title: "就诊科室",
    key: "department",
  },
  {
    title: "就诊医生",
    key: "doctor",
  },
  {
    title: "医生职称",
    key: "doctorType",
  },
  {
    title: "挂号类型",
    key: "bookingType",
  },
  {
    title: "门诊时间",
    key: "bookingDate",
  },
  {
    title: "候诊时间",
    key: "waitingTime",
  },
  {
    title: "挂号费",
    key: "cost",
  },
  {
    title: "预约时间",
    key: "bookingTime",
  },
  {
    title: "就诊状态",
    key: "status",
  },
  {
    title: "取消时间",
    key: "cancelTime",
  },
  // {
  //   title: "挂号备注",
  //   key: "tips",
  // },
];

export default function InfoCard(props: Props) {
  // 输入框的值
  const [inputValue, setInputValue] = useState(props.value.tips);

  const [messageApi, contextHolder] = message.useMessage();

  // 输入框
  const getInputValue = useCallback((value: any) => {
    setInputValue(value.target.value);
  }, []);
  useEffect(() => {}, [inputValue]);

  const success = useCallback(
    (text: string, type: any) => {
      messageApi.open({
        type: type,
        content: text,
        className: "custom-class",
        duration: 1,
        style: {
          marginTop: "50vh",
          marginLeft: "30vh",
        },
      });
    },
    [messageApi]
  );

  // 保存事件
  const saveAction = useCallback(async () => {
    // 发送保存备注请求
    const {
      data: { status },
    } = await requestTipsApi({ input: inputValue, id: props.value._id });
    props.value.tips = inputValue;
    if (status === 200) {
      success("备注成功", "success");
    }
  }, [inputValue, props.value, success]);

  // 取消按钮事件
  const cancelAction = useCallback(() => {
    setInputValue(props.value.tips);
  }, [props.value]);

  return (
    <div className="info-card">
      {contextHolder}
      <div className="title">{props.title}</div>
      {/* 患者信息卡片 */}
      {props.title === "患者信息" && (
        <div className="info">
          {patient.map((item, index) => (
            <div className="info-item" key={index}>
              <span className="label">{item.title}</span>
              <span>{props.value[item.key]}</span>
            </div>
          ))}
        </div>
      )}
      {/* 预约信息卡片 */}
      {props.title === "预约信息" && (
        <div className="info">
          {bookingInfo.map((item, index) => (
            <div className="info-item" key={index}>
              <span className="label">{item.title}</span>
              <span>{props.value[item.key]}</span>
            </div>
          ))}
          <div className="info-item">
            <span className="label">挂号备注</span>

            <Input
              placeholder="请输入内容"
              style={{ width: "200px" }}
              onChange={(value) => getInputValue(value)}
              value={inputValue}
            />
          </div>
          <div className="btn">
            <button className="save" onClick={saveAction}>
              保存
            </button>
            <button className="cancel" onClick={cancelAction}>
              取消
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
